<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 前端 主动发送JS请求，拉取数据？
        // 后端 mysql -> java 数组 json -> include templ <%= posts.forEach%>
        // 快速且主动的拉取api数据 一般有后端提供api 用json-server模拟了一下
        // 二进制流文件， json() json化
        // 跨域 端口，协议，域名不一样，就叫跨域
        // 5555 网页端口  3000 api服务端口

        const f=fetch('http://localhost:3000/books')

        // http://localhost  本地 ，wesbos.com  CROS 跨域
        // f.then(res=>res.json())
        //     .then(res=>{
        //         console.log(res);
        //     })
        const ff=fetch('http://localhost:3000/publisher');
        // Promise
        //     .all([f,ff])
        //     .then(response=>Promise.all(response.map(res=>res.json())))
        //     .then(response=>{
        //         console.log(response);
        //     });

        // Promise 
        //     .race([f,ff])
        //     .then(response=>response.json())
        //     .then(res=>{
        //         console.log(res);
        //     })
        //     .catch(err=>{
        //         console.log(err);
        //     })
        
        (async ()=>{ 
            
            try {   
                const booksres=await f;  // await 后面是promise resolved后的值给左边
                // console.log(books.json())
                const books = await booksres.json()
                console.log(books);
                const publisherres= await ff;
                const publisher= await publisherres.json();
            }
            catch(e){
                console.log(e);
            }
        })()

        // console.log(f instanceof Promise);
    </script>
</body>
</html>